var log = function () {
    console.log.apply(console, arguments)
}
<!--使用数组存储:todo对象 -->
var todoList = []

var bindEventAdd = function () {
    log('bind add button')
    var addButton = document.querySelector('#id-button-add')
    log('add Button', addButton)
    addButton.addEventListener('click', function () {
        log('click add')
        var todoInput = document.querySelector('#id-input-todo')
        var task = todoInput.value
        var todo = {
            'task': task,
            'time': currentTime()
        }
        //后端，保存->数组
        todoList.push(todo)
        //后端，数组保存到->localstorage
        saveTodos()
        //前端：保存到页面
        insertTodo(todo)
    })
}

var insertTodo = function (todo) {
    var todoContainer = document.querySelector('#id-div-container')
    var t = templateTodo(todo)
    todoContainer.insertAdjacentHTML('beforeend', t)
}

var templateTodo = function (todo) {
    var t = `
        <div class="todo-cell">
            <button class="todo-done">完成</button>
            <button class="todo-delete">删除</button>
            <button class="todo-edit">编辑</button>
            <span class="todo-label" contenteditable="true">${todo.task}</span>
            <span>${todo.time}</span>
        </div>
        `
    return t
}

//localStorage存储字符串
var saveTodos = function () {
    var s = JSON.stringify(todoList)
    localStorage.todoList = s
}

//localStorge存储的字符串，转换成数组，给template使用
var loadTodos = function () {
    var s = localStorage.todoList
    return JSON.parse(s)
}

var currentTime = function () {
    var d = new Date()
    var month = d.getMonth() + 1
    var date = d.getDate()
    var hours = d.getHours()
    var minutes = d.getMinutes()
    var seconds = d.getSeconds()
    var timeString = `${month}/${date} ${hours}:${minutes}:${seconds}`
    return timeString
}

//    事件委托
var bindEventEnter = function () {
    var todoContainer = document.querySelector('#id-div-container')
    todoContainer.addEventListener('keydown', function (event) {
        log('container keydown', event, event.target)
        var target = event.target
        if (event.key === 'Enter') {
            log('按了回车')
            target.blur()
            //告诉浏览器取消默认事件，event就不好使了
            event.preventDefault()
            var index = indexOfElement(target.parentElement)
            log('update index', index)
            todoList[index].task = target.innerHTML
            saveTodos()
        }
    })
}

var indexOfElement = function (element) {
    var parent = element.parentElement
    //比较对象 e = parent.children[i]
    for (var i = 0; i < parent.children.length; i++) {
        var e = parent.children[i]
        if (e === element) {
            return i
        }
    }
}
//
var bindEventButton = function () {

    var todoContainer = document.querySelector('#id-div-container')

    // 通过 event.target 的 class 来检查点击的是什么
    todoContainer.addEventListener('click', function (event) {
        log('container click', event, event.target)
        var target = event.target
        if (target.classList.contains('todo-done')) {
            log('done')
            var todoDiv = target.parentElement
            toggleClass(todoDiv, 'done')
        } else if (target.classList.contains('todo-delete')) {
            log('delete')
            var todoDiv = target.parentElement
            var index = indexOfElement(target.parentElement)
            log('delete index', index)
            todoDiv.remove()
            todoList.splice(index, 1)
        } else if (target.classList.contains('todo-edit')) {
            log('edit')
            var cell = target.parentElement
            var span = cell.children[3]
            log('span is ', span)
            span.setAttribute('contenteditable', 'true')
            span.focus()
        }
    })
}
//    todo div开关一个状态 class
var toggleClass = function (element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}
//focus获取焦点,blur失去焦点
var JuranEventType = {
    blur: 'blur',
    click: 'click',
}

//addListenEven(*,*,第三个参数true)事件冒泡
//一方面：flase:从外向里传递
// html->body->div->div#id-div-container->div-todo-cell->button-todo-delete
//另一方面：true:从里外外传递
// html<-body<-div<-div#id-div-container<-div-todo-cell<-button-todo-delete
var bindEventBlur = function () {
    log('bind event blur function')
    var todoContainer = document.querySelector('#id-div-container')
    todoContainer.addEventListener(JuranEventType.blur, function (event) {
        log('container blur', event, event.target)
        var target = event.target
        if (target.classList.contains('todo-label')) {
            log('update and save')
            //让span不可编辑
            target.setAttribute('contenteditable', 'false')
            var index = indexOfElement(target.parentElement)
            log('update index', index)
            todoList[index].task = target.innerHTML
            saveTodos()
        }
    }, true)
}
var initTodos = function () {
    todoList = loadTodos()
    for (var i = 0; i < todoList.length; i++) {
        var todo = todoList[i]
        insertTodo(todo)
    }
}

function bindEvents() {
    bindEventAdd()
    bindEventEnter()
    bindEventButton()
    bindEventBlur()
}

var __main = function () {
    bindEvents()
    initTodos()
}

__main()
